<script setup lang="ts">
import { ref } from "vue";
import ReCol from "@/components/ReCol";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import { typeOptions } from "./utils/data";
import { usePublicHooks } from "@/views/hooks";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    title: "新增",
    id: 0,
    name: "",
    code: "",
    status: 1,
    remark: ""
  })
});

const formRef = ref();
const newFormInline = ref(props.formInline);
const { switchStyle } = usePublicHooks();
function getRef() {
  return formRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="formRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="82px"
  >
    <re-col :value="12" :xs="24" :sm="24">
      <el-form-item label="字典名称" prop="name">
        <el-input
          v-model="newFormInline.name"
          clearable
          placeholder="请输入任务名称"
        />
      </el-form-item>
    </re-col>

    <re-col :value="12" :xs="24" :sm="24">
      <el-form-item label="字典标识" prop="code">
        <el-input
          v-model="newFormInline.code"
          clearable
          placeholder="请输入字典标识"
        />
      </el-form-item>
    </re-col>
    <re-col :value="12" :xs="24" :sm="24">
      <el-form-item label="状态">
        <el-switch
          v-model="newFormInline.status"
          inline-prompt
          :active-value="1"
          :inactive-value="2"
          active-text="启用"
          inactive-text="停用"
          :style="switchStyle"
        />
      </el-form-item>
    </re-col>
    <re-col>
      <el-form-item label="备注">
        <el-input
          v-model="newFormInline.remark"
          placeholder="请输入备注"
          type="textarea"
        />
      </el-form-item>
    </re-col>
  </el-form>
</template>
